<script setup lang="ts">
import type { optionsType } from "@/types/CommonTable";
import { toRaw } from "vue";
const props = defineProps<{
    tableData: Array<any>;
    options: optionsType;
}>();

const { column } = props.options;
const { dialogColumn } = props.options;
// 把一个proxy对象转化为原始对象
const dialogColumnData = toRaw(dialogColumn);
// const slots = useSlots();

const emits = defineEmits<{
    (e: "rowEdit", row: any, type: string): void;
    (e: "rowDel", index: number, row: any, type: string): void;
}>();

const rowEdit = (row: any, type: string) => {
    emits("rowEdit", row, type);
};

const rowDel = (index: number, row: any, type: string) => {
    console.log(index, row, type);
};
</script>

<template>
    <div class="commonTable">
        <el-table style="width: 100%" :data="tableData">
            <el-table-column
                v-if="options.showIndex"
                type="index"
                :width="options.indexWidth"
                :label="options.indexLabel"
            ></el-table-column>
            <template v-for="item in column" :key="item.prop">
                <el-table-column
                    v-if="$slots[item.prop]"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"
                >
                    <template #default="scope">
                        <slot :name="item.prop" :scope="scope"></slot>
                    </template>
                </el-table-column>
                <el-table-column
                    v-else
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"
                >
                </el-table-column>
            </template>

            <el-table-column
                v-if="options.menu"
                :width="options.menuWidth"
                :label="options.menuTitle"
                :fixed="options.menuFixed ? 'right' : ''"
            >
                <template #default="scope">
                    <el-button
                        :type="options.menuType ?? 'primary'"
                        size="small"
                        @click="rowEdit(scope.row, 'edit')"
                        >编辑</el-button
                    >
                    <el-button
                        :type="options.menuType ?? 'primary'"
                        size="small"
                        @click="rowDel(scope.$index, scope.row, 'del')"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<style lang="less" scoped></style>
